<template>
  <div class="hello">
    <h2>Git 版本管理工具 - “没有消息就是好消息 ：）”</h2>
    <div class="content">
      <div class="custom-card">
        <div class="custom-title">
          <div class="custom-left"></div>
          <span>专有名词</span>
        </div>
        <div class="custom-content">
          <p v-for="(item, index) in wordList" :key="index"><span class="custom-tag1">{{item.name}}</span> >> {{item.translate}}</p>
        </div>
      </div>
      <div class="custom-card">
        <div class="custom-title">
          <div class="custom-left"></div>
          <span>武林秘籍</span>
        </div>
        <div class="custom-content">
          <div v-for="(item, index) in methodList" :key="index">
            <p class="custom-tag2">{{item.name}} >> </p>
            <p style="width: fit-content;" v-for="(way, i) in item.methods" :key="i" class="custom-tag3">>> {{way}}</p>
          </div>
        </div>
      </div>
      <div class="custom-card">
        <div class="custom-title">
          <div class="custom-left"></div>
          <span>相关指令</span>
        </div>
        <div class="custom-content">
          <p v-for="(item, index) in directivesList" :key="index"><span class="custom-tag3">{{item.name}}</span> >> {{item.desc}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      wordList: [
        {
          name: 'repository',
          translate: '版本库、仓库、.git'
        },{
          name: 'insertions',
          translate: '插入内容行数'
        },{
          name: 'commit',
          translate: '提交、保证'
        },{
          name: 'Working Directory',
          translate: '工作区、电脑中的目录'
        },{
          name: 'stage',
          translate: '暂存区'
        },{
          name: 'branch',
          translate: '分支、会自动创建第一个分支master'
        },{
          name: 'untracked',
          translate: '未跟踪、未添加的文件'
        },{
          name: 'tracked',
          translate: '跟踪'
        },{
          name: 'merge',
          translate: '合并'
        },{
          name: 'conflict',
          translate: '分支合并发生冲突'
        },{
          name: 'fetch',
          translate: '抓取'
        }
      ],
      methodList: [
        {
          name: '创建本地版本库',
          methods: ['git init', 'git add <file>', 'git commit -m <message>']
        },
        {
          name: '本地代码首次推送到远程仓库',
          methods: ['git init', 'git add <file>', 'git commit -m <message>', 'git remote add origin <url>', 'git push origin master']
        },
        {
          name: '克隆拉取代码修改后提交',
          methods: ['git clone <url>', 'git add <file>', 'git commit -m <message>', 'git push origin master']
        },
        {
          name: '拉取代码冲突时',
          methods: ['git stash', 'git pull', 'git stash pop']
        },
        {
          name: '创建新分支再合并到当前分支',
          methods: ['git checkout -b <name>', 'git merge <name>', 'git branch -d <name>']
        },
      ],
      directivesList: [
        {
          name: '* git config --global user.name "Your Name"',
          desc: '全局配置提交用户名'
        },
        {
          name: '* git config --global user.email "Your email"',
          desc: '全局配置邮箱'
        },
        {
          name: '* git init',
          desc: '初始化，把当前目录变成git可以管理的仓库，此时会多出一个跟踪管理版本库的.git文件(shift+command+.可以显示隐藏文件)'
        },
        {
          name: '* git add <file>',
          desc: '把文件<file>添加到暂存仓库中 git add . 会添加所有文件'
        },
        {
          name: '* git commit -m <message>',
          desc: '把暂存区所有文件提交到仓库，-m 后面输入的是本次提交的说明'
        },
        {
          name: '* git status',
          desc: '查看仓库当前的状态，可以知道当前是否有文件被修改过还没做好提交准备'
        },
        {
          name: 'git diff',
          desc: '查看发生改动的文件具体改了些什么'
        },
        {
          name: '* git log',
          desc: '显示从最近到最远的提交日志 加上参数 --pretty=oneline 可以提炼出更有意义的信息并在一行内显示，其中有个 commit id 是版本的id'
        },
        {
          name: 'git reset --hard HEAD^',
          desc: '回退版本，其中 HEAD 表示当前版本，HEAD^ 表示上个版本，HEAD^^ 表示上上个版本，HEAD~100 表示前100个版本，指定一个 commit id（这个id无须写全）就可以回到未来的版本'
        },
        {
          name: 'git reset HEAD <file>',
          desc: '将文件<file>从暂存区撤回，重新放回工作区'
        },
        {
          name: 'git reflog',
          desc: '记录你的每一次命令，可以得到历史的 commit id'
        },
        {
          name: 'git checkout -- <file>',
          desc: '把文件<file>在工作区的修改全部撤销，这个文件回到最近一次git commit或git add时的状态'
        },
        {
          name: 'git rm <file>',
          desc: '删除一个文件'
        },
        {
          name: '* git remote add origin <url>',
          desc: '将本地仓库与远程仓库进行关联，origin是默认的远程库名称'
        },
        {
          name: 'git remote rm origin',
          desc: '删除已关联的远程库'
        },
        {
          name: '* git push -u origin master',
          desc: '把本地库的内容推送到远程origin库master分支，第一次推送时加上 -u 参数指定一个默认主机，这样后面就可以不加任何参数'
        },
        {
          name: '* git clone <url>',
          desc: '从远程仓库克隆一份到本地目录中，默认情况下克隆之后只能看到本地的master分支'
        },
        {
          name: 'git branch',
          desc: '查看分支，* 号表示当前分支'
        },
        {
          name: 'git branch <name>',
          desc: '创建一个名为<name>的分支'
        },
        {
          name: 'git checkout <name>',
          desc: '切换分支'
        },
        {
          name: 'git checkout -b <name>',
          desc: '创建并且切换到<name>分支'
        },
        {
          name: 'git checkout -b <name> origin/<name>',
          desc: '从远程抓取origin/<name>到本地，创建并且切换到<name>分支'
        },
        {
          name: 'git merge <name>',
          desc: '合并<name>分支到当前分支，默认Fast forward模式，--no-ff 参数表示禁用Fast forward，这会创建一个新的commit，因此还有加上 -m 把commit描述写进去'
        },
        {
          name: 'git branch -d <name>',
          desc: '删除<name>分支'
        },
        {
          name: 'git branch -D <name>',
          desc: '强行删除一个未合并的<name>分支'
        },
        {
          name: 'git log --graph',
          desc: '参数 --graph 查看分支合并图'
        },
        {
          name: '* git stash',
          desc: '将当前的工作现场（未完成的修改）储藏起来'
        },
        {
          name: 'git stash list',
          desc: '查看stash列表 stash@{0} stash@{1} ...'
        },
        {
          name: 'git stash apply [stash@{0}]',
          desc: '恢复stash中储藏的内容 可以指定恢复哪一次stash，这个指令stash内容并不删除'
        },
        {
          name: 'git stash drop',
          desc: '删除stash内容'
        },
        {
          name: '* git stash pop',
          desc: '恢复的同时删除stash中的内容'
        },
        {
          name: 'git cherry-pick <commit>',
          desc: '复制一个特定的提交到当前分支，生成新的commit'
        },
        {
          name: 'git remote',
          desc: '查看远程库的信息 加上 -v 参数 能查看更加详细的信息，如果没有推送权限，就看不到push的地址'
        },
        {
          name: '* git pull',
          desc: '抓取远程的新提交'
        },
        {
          name: 'git branch --set-upstream <name> origin/<name>',
          desc: '建立本地分支和远程分支的关联'
        },
        {
          name: 'git rebase',
          desc: '本地未push的分叉提交历史整理成直线 git log 更直观'
        },
        {
          name: 'git tag <name> [commit id]',
          desc: '打一个新标签，默认打在最新提交的commit上，可以指定 commit id；直接使用git tag 可以查看所以标签'
        },
        {
          name: 'git tag',
          desc: '查看所以标签'
        },
        {
          name: 'git tag -a <name> -m <message> [commit id]',
          desc: '创建带有说明的标签，用-a指定标签名，-m指定说明文字'
        },
        {
          name: 'git show <tagname>',
          desc: '查看指定标签信息'
        },
        {
          name: 'git push origin <tagname>',
          desc: '推送一个本地标签'
        },
        {
          name: 'git push origin --tags',
          desc: '推送全部未推送过的本地标签'
        },
        {
          name: 'git tag -d <tagname>',
          desc: '删除一个本地标签'
        },
        {
          name: 'git push origin :refs/tags/<tagname>',
          desc: '删除一个远程标签，在删除远程标签之前，先将本地标签删除'
        },
        {
          name: 'git config --global color.ui true',
          desc: 'Git会适当地显示不同的颜色'
        },
        {
          name: 'git config --global alias.<aliasname> <name>',
          desc: '配置别名，<name>是原名称，如status，<aliasname>是别名，如st，之后就可以使用git st 代替 git status'
        },
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.custom-title{
  width: fit-content;
  display: flex;
  align-items: center;
  .custom-left{
    height: 10px;
    border: 2px solid red;
    border-radius: 2px;
  }
  span{
    margin-left: 6px;
    font-size: 18px;
    font-weight: bold;
  }
}

.tag(@color){
  color: white;
  background: @color;
  font-weight: bold;
  font-size: 14px;
  padding: 2px 6px;
  box-sizing: border-box;
}
.custom-tag1{
  .tag(#669966);
}
.custom-tag2{
  .tag(#CC6666);
}
.custom-tag3{
  .tag(#6699CC);
}

.content{
  display: flex;
  height: calc(100vh - 84px);
  .custom-card{
    margin: 8px;
    border-radius: 8px;
    box-shadow: 0 6px 16px #ccc;
    padding: 15px;
    box-sizing: border-box;
    &:first-child{
      flex: 1;
    }
    &:nth-child(2){
      flex: 1;
    }
    &:last-child{
      flex: 3;
    }
    .custom-content{
      height: calc(100% - 26px);
      overflow-y: scroll;
      text-align: left;
    }
  }
}
</style>
